<template>
    <!-- 打开App按钮 -->
    <div class="videoContainer">
        <div class="videoBg">
            <div class="videoBofang" @click="changeVideoStatus">
                <VanImage class="videoImg" :src="'https://imagev2.xmcdn.com/' + program[0].trackInfo.cover"></VanImage>
                <audio class="videoImg" ref="audioRef" :src="currentVideo.trackInfo.playPath" autoplay
                    @click="changeVideoStatus"></audio>
            </div>

            <div class="videoIcon">
                <Icon name="arrow-left"></Icon>
                <Icon name="play-circle" v-if="status === 'pause-circle'"></Icon>
                <Icon name="pause-circle" v-else></Icon>
                <Icon name="arrow"></Icon>
            </div>

            <div class="videoText">{{ currentVideo.trackInfo.title }}</div>

            <div class="videoSetting">
                <span class="settingText">倍数播放</span>
                <span class="settingText">音量调节</span>
                <span class="settingText">下载收听</span>
            </div>

            <div class="progress-container">
                <span class="showPlayTime">{{ showPlayTime }}</span>
                <!-- 总长度 -->
                <div class="progress progress-range" ref="range"></div>
                <!-- 缓存的 -->
                <div class="progress progress-loaded" ref="loaded"></div>
                <!-- 播放过 -->
                <div class="progress progress-played" ref="played"></div>
                <!-- 小球 -->
                <div class="progress-bar" ref="bar"></div>
                <span class="showTime">{{ showTime }}</span>
            </div>

        </div>

        <div class="btn">打开APP，完整收听</div>
    </div>


    <!-- 节目 -->
    <div class="program">
        <!-- 节目 -->

        <div class="title">
            <VanImage class="titleImage" :src="'https://imagev2.xmcdn.com/' + program[0].trackInfo.cover"></VanImage>
            <span>{{ program[0].trackInfo.title }}</span>
        </div>

        <div class="programItem">
            <div class="item" v-for="item in program" :key="item.albumId" @click="changeVideo(item)">
                <Icon name="play-circle-o" class="play" size="30px" color="#999999" />
                <div class="itemText">
                    {{ item.trackInfo.title }}
                </div>
                <Icon name="down" class="downlode" size="14px" />
            </div>
        </div>

        <!-- 加载更多 -->
        <div class="lodeMore">
            <span>加载更多</span>
            <Icon name="arrow-down" color="#f86442" size="20px" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
import router from '@/router';
import { isTemplateNode } from '@vue/compiler-core';

export default defineComponent({
    name: 'Sound'
})

</script>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { Icon, Image as VanImage } from 'vant';
import { showNotify } from "vant";

// //1.引入pinia中的某个模块暴露的方法
// import useProgramState from '@/store/program';
// import { storeToRefs } from "pinia"
// //2.调用pinia模块中暴露的方法，得到一个对象
// const programState = useProgramState()
// //3.解构pinia模块内部的数据,如果直接解构得到的不是ref对象，需要使用storeToRefs方法解构
// const { programsList } = storeToRefs(programState)
const route = useRoute()


// 音频真实DOM
const audioRef = ref()
console.log(audioRef, "audioRef")
// 播放状态
const status = ref<string>("pause-circle")
// 当前音频的总时长
const durationTime = ref<number>(0)
const currentTime = ref<number>(0)
currentTime.value = audioRef.value?.currentTime
// 总时间的分和秒
const mins = ref(0)
const secs = ref(0)

// 播放分和秒
const playMins = ref(0)
const playSecs = ref(0)

// 显示的时间
const showTime = ref("0: 00")
const showPlayTime = ref("0: 00")

// 播放进度条
// 小球
const bar = ref()
// 总长度
const range = ref()
// 缓存
const loaded = ref()
// 播放过
const played = ref()
// 定时器
const timer = ref<any>(0)



// 节目列表
let program = ref<any>({});
// program.value = programsList.value
program.value = JSON.parse(localStorage.getItem('programsList') as string)

// 获取当前路由参数  在 界面列表里的下标
const index = program.value.findIndex((item: any) => item.id == route.params.id)
// 当前播放的音频
const currentVideo = ref<any>({})
currentVideo.value = program.value[index]

// 切换音频
const changeVideo = (item: any) => {
    console.log(item, 'item');
    // 清除所有定时器
    clearInterval(timer.value)
    // 按钮变成播放状态
    status.value = 'pause-circle'
    // 所有时间都清零
    showTime.value = "0: 00"
    showPlayTime.value = "0: 00"
    bar.value.style.left = 0
    played.value.style.width = 0
    loaded.value.style.width = 0

    router.push({
        name: "Sound",
        params: {
            id: item.id,
        }
    })
}

// 切换音频播放状态
const changeVideoStatus = () => {
    if (status.value == 'play-circle') {
        audioRef.value.pause()
        status.value = 'pause-circle'
        // console.log(audioRef, "audioRef66666666666")
        // 清除定时器
        clearInterval(timer.value)

        // 获取
    } else {
        audioRef.value.play()
        status.value = 'play-circle'
        // 护球总时长
        durationTime.value = parseInt(audioRef.value?.duration)
        if (!durationTime.value) {
            showNotify({
                type: "warning",
                message: "Vip专享",
            });

        } else {
            mins.value = Math.floor(durationTime.value / 60)
            secs.value = Math.floor(durationTime.value % 60)
            // console.log(mins.value, secs.value);


            showTime.value = mins.value + ':' + secs.value
            // 启动定时器
            timer.value = setInterval(() => {
                currentTime.value = parseInt(audioRef.value?.currentTime)

                playMins.value = Math.floor(currentTime.value / 60)
                playSecs.value = Math.floor(currentTime.value % 60)

                showPlayTime.value = playMins.value + ":" + `${playSecs.value > 9 ? playSecs.value : '0' + playSecs.value}`

                // 小球移动的距离
                // console.log(`${currentTime.value / durationTime.value * 100} %`);
                // console.log(bar);



                bar.value.style.left = `${currentTime.value / durationTime.value * 100}%`
                played.value.style.width = `${currentTime.value / durationTime.value * 100}%`
                loaded.value.style.width = `${currentTime.value / durationTime.value * 100 + 10}%`

                console.log(audioRef, "audioRef66666666666")


            }, 1000)
        }




    }
}



// 总时间
// audioRef.value?.duration



watch(route, () => {
    // 获取当前路由参数  在 界面列表里的下标
    const index = program.value.findIndex((item: any) => item.id == route.params.id)
    // 更加当前点击的音频下标  修改音频文本内容
    currentVideo.value = program.value[index]
    // 切换路由时  初始化播放状态
    status.value = 'pause-circle'
})
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0
}

.progress-container {
    position: relative;
    z-index: 100;
    margin-left: 10px;
    width: 80%;
    height: 10px;

    .showTime {
        position: absolute;
        right: 0;
        transform: translateY(15px);
        font-size: 14px;
    }

    .showPlayTime {
        position: absolute;
        left: 0;
        transform: translateY(15px);
        font-size: 14px;

    }

    .progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 6px;
        /* transition: .5s all; */
    }

    .progress-range {
        background: rgba(255, 255, 255, 0.2);
    }

    .progress-loaded {
        width: 0;
        background: rgba(255, 255, 255, 0.6);
        transition: .5s all;
    }

    .progress-played {
        width: 0;
        background: rgba(0, 150, 255, 1);
    }

    .progress-bar {
        position: absolute;
        left: 0;
        top: 0px;
        width: 14px;
        height: 14px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
    }

}

.videoContainer {

    width: 100vw;
    height: 350px;
    background-color: rgba(32, 32, 32, 0.4);

    .videoBg {

        width: 400px;
        height: 200px;

        .videoBofang {
            margin-left: 20px;
            width: 300px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;

            .videoImg {
                position: relative;
                width: 100px;
                height: 100px;
            }

            .videoListen {
                width: 150px;
                height: 20px;
                margin-top: 100px;
            }
        }


        .videoIcon {
            margin-left: 20px;
            margin-top: -80px;
            display: flex;
            justify-content: space-evenly;
            width: 300px;
            color: pink;

        }

        .videoText {
            margin-top: 50px;
            margin-left: 30px;
            font-size: 20px;
            width: 300px;
            color: white;
        }

        .videoSetting {
            width: 200px;
            height: 40px;
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
            margin-left: 80px;
            margin-top: 20px;
            font-size: 12px;

            .settingText {
                display: inline-block;
                width: 60px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border: 1px solid orange;
                border-radius: 5px;
                font-size: 12px;
                color: orange;
            }

        }
    }


}



.titleImage {
    width: 50px;
    height: 50px;
}

.btn {
    width: 240px;
    height: 40px;
    border-radius: 20px;
    background: linear-gradient(90deg, #ff8a6e, #f66743);
    text-align: center;
    line-height: 40px;
    color: #fff;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    margin-left: 68px;
    margin-top: 100px;
    font-size: 16px;
}

// 节目
.program {
    width: 375px;
    font-size: 18px;

    .programItem {
        .item {
            display: flex;
            width: 345px;
            padding: 12px 0px;
            border-bottom: 1px solid #f3f4f5;
            margin-left: 10px;

            // align-items: center;
            .itemText {
                font-size: 16px;
                width: 266px;
                height: 52px;
                padding: 0px 10px;
                line-height: 24px;
            }

            .play {
                margin-top: 5px;
            }
        }
    }

    .lodeMore {
        width: 345px;
        height: 22px;
        padding: 17px 0px;
        color: #f86442;
        text-align: center;
        font-size: 16px;
    }
}
</style>